import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import PropTypes from 'prop-types';
import { Modal, Button, Timeline, message, Input, Table, Form, Row, Col, Select, Space, Radio, InputNumber } from 'antd';
import { getDicByKey } from '@/support/common';
import { unset } from 'lodash';
import { RFC_2822 } from 'moment';

const levelData = {
  0: '低',
  1: '中',
  2: '高',
}

const priorityData = {
  0: '低',
  1: '中',
  2: '高',
}

const handleStatusData = {
  0: '未结束',
  1: '已结束',
}
const FormItem = Form.Item;
const { TextArea } = Input;
const mapStateToProps = (state: any) => ({
  batteryMonitorWarningVehicle: state.batteryMonitorWarningVehicle,
})
class HistoryModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.any
  };
  constructor(props: any) {
    super(props);
    this.state = {
      orderList: [],
      currentData: {},
      currentCode: '',
    }
  }

  componentDidMount() {
    const { onRef } = this.props
    onRef && onRef(this);
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible, vin } = this.props
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      this.getOrderList(vin)
    }
  }

  getOrderList = (vin: string) => {
    const { dispatch } = this.props
    dispatch({
      type: 'http/getDataWithRes',
      payload: {
        url: '/battery/monitor/order/list',
        vin,
      },
      callback: (res: any) => {
        if (res.statusCode === '0' && res.data.orderList) {
          this.getDealMsg(res.data.orderList[0]?.code);
          this.setState({
            orderList: res.data.orderList || [],
            currentCode: res.data.orderList[0]?.code
          })
        } 
      }
    })
  }

  //  查询工单处理详情
  getDealMsg = (code: string) => {
    const { dispatch } = this.props
    code && dispatch({
      type: 'http/getDataWithRes',
      payload: {
        url: '/battery/monitor/order/search',
        code,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          this.formRef.current && this.formRef.current.setFieldsValue({
            ...res.data,
            handleStatus: handleStatusData[res.data?.handleStatus],
            recommendHandleWay: getDicByKey(this.context.dicData, 'recommendHandleWay', res.data?.recommendHandleWay + ''),
            priority: priorityData[res.data?.priority],
            level: levelData[res.data.level],
          })
        }
      }
    })
  }

  handleSelectOrder = (code: any) => {
    const { currentCode } = this.state;
    if ( currentCode == code ) return;
    this.setState({
      currentCode: code
    }, () => {
      this.getDealMsg(code);
    }) 
  }

  close = () => {
    const { closeModal } = this.props;
    closeModal();
  }

  render() {
    const { modalVisible } = this.props;
    const { orderList, currentCode } = this.state;

    const footer = (
      <div>
        <Button onClick={this.close} type="primary">
          关闭
        </Button>
      </div>
    )

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };

    return (
      <Modal
        title="处理历史"
        footer={footer}
        visible={modalVisible}
        width={1000}
        onCancel={this.close}
      >
        <div style={{ paddingTop: '8px' }}>
          <Row justify="space-between">
            <Col span={8}
              style={{
                height: '100%',
                paddingTop: '6px',
                overflowX: 'hidden',
                overflowY: 'auto'
              }}
            >
              <Timeline mode="left">
                {orderList.map((item: any, i: number) => (
                  <Timeline.Item
                    key={i}
                    color={'#333'}
                    label={item.createDate}
                    onClick={() => {
                      this.handleSelectOrder(item.code)
                    }}
                  >
                    <div>
                      <div style={{
                        backgroundColor: item.code == currentCode ? '#f7f7f7' : 'unset'
                      }}>{item.code}</div>
                      <div style={{
                        width: '80%',
                        color: '#fff',
                        textAlign: 'center',
                        backgroundColor: item.handleStatus == 1 ? '#333' : '#AAA'
                      }}>{item.handleStatus == 1 ? '已结束' : '未结束'}</div>
                    </div>
                  </Timeline.Item>
                ))}
              </Timeline>
            </Col>
            <Col span={15}>
              <Form
                ref={this.formRef}
              >
                <Row gutter={24}>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="code"
                      label="工单编号"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="createDate"
                      label="工单创建时间"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="vin"
                      label="VIN码"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="brandName"
                      label="品牌"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="seiresName"
                      label="车系"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="typeName"
                      label="车型"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="level"
                      label="风险等级"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="batteryType"
                      label="电池类型"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="batterySupplier"
                      label="电池供应商"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="batteryCode"
                      label="电池包编号"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="priority"
                      label="优先级"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="recommendHandleWay"
                      label="建议处理方式"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={24}>
                    <FormItem
                      labelCol={{
                        xs: { span: 24 },
                        sm: { span: 4 },
                        md: { span: 4 },
                      }}
                      wrapperCol={{
                        xs: { span: 24 },
                        sm: { span: 20 },
                        md: { span: 20 },
                      }}
                      colon={false}
                      name="workItem"
                      label="工作事项"
                    >
                      <TextArea disabled={true} placeholder="" />
                      {/* <Input disabled={true} placeholder="" /> */}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="handleStatus"
                      label="处理状态"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="handleResult"
                      label="处理结果"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="handleStartDate"
                      label="维修开始时间"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="newBatteryCode"
                      label="新电池包编号"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="handleDealer"
                      label="处理人"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem
                      {...formItemLayout}
                      colon={false}
                      name="handleEndDate"
                      label="维修结束时间"
                    >
                      <Input disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={24}>
                    <FormItem
                      labelCol={{
                        xs: { span: 24 },
                        sm: { span: 4 },
                        md: { span: 4 },
                      }}
                      wrapperCol={{
                        xs: { span: 24 },
                        sm: { span: 20 },
                        md: { span: 20 },
                      }}
                      colon={false}
                      name="handleItem"
                      label="维修内容"
                    >
                      <TextArea disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                  <Col span={24}>
                    <FormItem
                      labelCol={{
                        xs: { span: 24 },
                        sm: { span: 4 },
                        md: { span: 4 },
                      }}
                      wrapperCol={{
                        xs: { span: 24 },
                        sm: { span: 20 },
                        md: { span: 20 },
                      }}
                      colon={false}
                      name="monitorRecord"
                      label={<div>持续监控记录<div style={{ textAlign: 'center' }}>（20天）</div></div>}
                    >
                      <TextArea disabled={true} placeholder="" />
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Col>
          </Row>
        </div>
      </Modal>
    )
  }
}
export default connect(mapStateToProps)(HistoryModal);
